<!-- TableDisplay  导入 xlsx 文件 / 显示表格内容 / 选择表 / 设置列

  event:

    + 'update-table-data'  更新表格数据

    + 'update-config-data'  更新设置数据

-->

<template>
  <div class="table-display" v-loading="loading">
    <div v-if="tableData == null" class="import">
      <el-upload
        class="avatar-uploader"
        action="#"
        drag
        :show-file-list="false"
        :auto-upload="false"
        :on-change="selectFile"
        :on-before-upload="() => false"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处, 或点击选择文件</div>
      </el-upload>
    </div>
    <div v-else class="display">
      <div class="top">
        <div class="select-sheet">
          <span>使用表</span>
          <el-select size="small" placeholder="请选择" :value="configData.currentSheet" @input="selectSheet">
            <el-option key="" label="" value="" />
            <el-option
              v-for="i in tableData.sheetList"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            />
          </el-select>
        </div>
        <div v-if="sheet != null" class="row-count">共 {{ sheet.length }} 行</div>
      </div>
      <div v-if="sheetColumn == null" class="placeholder">
        (空白表格)
      </div>

      <div v-else class="table-content">
        <el-table
          :data="sheet"
        >
          <el-table-column
            label=""
            align="center"
            :width="50"
          >
            <template v-slot="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="i in sheetColumn"
            :key="i"
            :prop="i"
            :label="i"
          >
            <template v-slot:header>
              <TableDisplayHeader
                :column="i"
                :config-data="configData"
                @update-config-data="emitUpdateConfig"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import readXlsx from '@/utils/readXlsx'
import TableDisplayHeader from './TableDisplayHeader'

export default {
  name: 'TableDisplay',
  components: {
    TableDisplayHeader,
  },
  props: {
    tableData: {
      type: Object,
    },
    configData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    sheet() {
      if (this.tableData == null) {
        return null
      }
      const currentSheet = this.configData.currentSheet
      const sheetMeta = this.tableData.sheetList.filter(x => x.id === currentSheet)
      if (sheetMeta.length > 0) {
        return this.tableData.sheet[sheetMeta[0].index]
      }
      return null
    },
    sheetColumn() {
      if (this.sheet == null) {
        return null
      }
      if (this.sheet.length < 1) {
        return null
      }
      const list = Object.keys(this.sheet[0])
      if (list.length > 0) {
        return list
      }
      return null
    },
  },
  methods: {
    emitUpdateConfig(data) {
      this.$emit('update-config-data', data)
    },
    selectFile(file) {
      this.loading = true
      setTimeout(() => {
        this.readFile(file)
      }, 0)
    },
    async readFile(file) {
      const data = await readXlsx(file.raw)
      this.$emit('update-table-data', data)
      setTimeout(() => {
        this.loading = false
      }, 0)
    },
    selectSheet(name) {
      const config = Object.assign({}, this.tableConfig, {
        currentSheet: name,
        nameColumn: '',
        numberColumn: {},
      })
      this.emitUpdateConfig(config)
    },
  },
}
</script>

<style scoped lang="scss">
.avatar-uploader {
  height: 50vh;
}

.avatar-uploader::v-deep {
  .el-upload {
    position: relative;
    display: block;
    height: 100%;
    box-sizing: border-box;
  }

  .el-upload-dragger {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .el-icon-upload {
    margin-top: 0;
  }
}

.top {
  display: flex;
  align-items: center;
}

.select-sheet {
  flex-grow: 1;

  span {
    margin-right: 0.5em;
  }
}

.placeholder {
  text-align: center;
  opacity: 0.5;
  margin-top: 1em;
}

.table-content {
  margin-top: 1em;
}
</style>
